
import { defineComponent, onMounted, onBeforeMount, reactive, VueElement, type StyleValue, onUnmounted } from "vue";
import axios from 'axios';
import { counter } from '../../count';
import { WordCloud, getRandLetterNum } from './../WordCloud';
import { wordList } from './../WordCloud/words.js'
import dynamicJson from  './../data.json';

import './style.less';
import Card from "@/components/Card";
import {ElButton, ElTable, ElTableColumn} from "element-plus";
import {gjlxfbbFn} from "@/views/OperationalRegulation/chart";

interface DynamicDataItem {
  value: number;
  [key: string]: any;
};

interface State {
  dynamicData: DynamicDataItem[],
  activeTitle: string,
  status: boolean,
  pieStatus: boolean,
  tableData: any[],
  flowCount: number,
  journalCount: number,
  operationalRegulationMapTimer: any
};

export default defineComponent({
  setup() {
    const state = reactive<State>({
      activeTitle: '庆阳市',
      dynamicData: [],
      status: true,
      pieStatus: true,
      tableData: [],
      flowCount: 0,
      journalCount: 0,
      operationalRegulationMapTimer: null
    });

    const getTableData = async () => {
      const res: any = await axios.post("http://localhost:8080/x_TableData");
      state.tableData = []
      if (state.status) {
        state.tableData = res.data.data.l2;
      } else {
        state.tableData = res.data.data.l1;
      }
      state.flowCount = res.data.data.count1;
      state.journalCount = res.data.data.count2;
    }

    const initChartGjlxfbb = () => {

    }

    const changeTableStatus = (val:any) => {
      state.status = val
      getTableData();
    }

    const changePieStatus = (val:any) => {
      state.pieStatus = val;
      gjlxfbbFn(val);
    }

    onBeforeMount(async () => {
      // const resp = await axios.get('src/views/OperationalRegulation/data.json');
      state.dynamicData = dynamicJson.list
    })

    const initData = () => {
      // initWordCloud()
      getTableData();
      gjlxfbbFn(state.pieStatus);
    }

    onUnmounted(() => {
      clearInterval(state.operationalRegulationMapTimer);
    })

    onMounted(() => {
      initWordCloud()
      getTableData();
      gjlxfbbFn(state.pieStatus);
      state.operationalRegulationMapTimer = setInterval(()=>{
        initData();
      },10000)
    });

    const initWordCloud = () => {
      let list = [];
      for (let i = 0; i < wordList.length; i++) {
        let a = i % 10;
        list.push({
          //   name: `${a}${a}${a}${a}`,
          name: wordList[i],
          value: Math.round(Math.random() * 100)
        });
      }
      // console.log(list);
      let myWordCloud = new WordCloud();
      myWordCloud.initThree(document.getElementById('wordCloud'));
      window.myWordCloud = myWordCloud;
      myWordCloud.createChart({
        data: list,
        minFontSize: 2,
        maxFontSize: 5,
        color: '#FFFFFF',
        radius: 30
      });
    }

    return () => {
      const { dynamicData } = state;
      return (
        <div class="or-center">
          <div class="vlc-top-realtime-data doudou-row">
            <div class="dynamic-data-item">
              <span class="ddi-title">流量数</span>
              <div class="ddi-value">
                      <span
                          class='dynamic-data-item_0'
                          style={{color: '#218FF7'}}
                      >
                        {state.flowCount}
                      </span>
                <span class="ddi-unit">
                        个
                      </span>
              </div>
            </div>

            <div class="dynamic-data-item">
              <span class="ddi-title">日志数</span>
              <div class="ddi-value">
                      <span
                          class='dynamic-data-item_1'
                          style={{color: '#00FF96'}}
                      >
                        {state.journalCount}
                      </span>
                <span class="ddi-unit">
                        个
                      </span>
              </div>
            </div>

          </div>
          <svg
            class="map-svg"
            width="1584"
            height="1584"
          >
            <g>
              <image
                class="image-3D"
                href={new URL(`@/assets/operational-regulation/luminous-source.png`, import.meta.url).href}
              />
            </g>
          </svg>
          <div id="wordCloud"></div>
          <Card title={state.status ? "日志当前状态" : "流量当前状态" } style="height: 25%; bottom:-55%; width:43%; left:5%;">
            <div class="center-table">
              <div class="dl-right-top-btn">
                <ElButton type="primary" class={ !state.status && 'noActive'} onClick={() => changeTableStatus(true)}>日志当前状态</ElButton>
                <ElButton type="primary" class={ state.status && 'noActive'} onClick={() => changeTableStatus(false)}>流量当前状态</ElButton>
              </div>
              <ElTable
                  data={state.tableData}
                  border
              >
                <ElTableColumn
                    type="index"
                    width="80"
                    label="序号"
                    align="center"
                    show-overflow-tooltip="true"
                />
                <ElTableColumn
                    prop={state.status ? "kuai" : "id"}
                    label="ID"
                    width="350"
                    align="center"
                    show-overflow-tooltip="true"
                />
                <ElTableColumn
                    prop={ state.status ? "riqi": "sj"}
                    label="日期"
                    align="center"
                    show-overflow-tooltip="true"
                />
                <ElTableColumn
                    prop={ state.status ? "sta": "sjlx"}
                    width="80"
                    label="状态"
                    align="center"
                    show-overflow-tooltip="true"
                >
                  {
                    (scope:any) => (
                        <>
                          <span style={scope.row.sta == "异常" ? "color: red" : ""} v-show={state.status}>{scope.row.sta}</span>
                          <span style={scope.row.sjlx == "异常" ? "color: red" : ""} v-show={!state.status}>{scope.row.sjlx}</span>
                        </>
                    )
                  }
                </ElTableColumn>
              </ElTable>
            </div>
          </Card>
          <Card title={state.pieStatus ? "攻击类型分布比" : "异常日志事件比"} style="height: 30%; bottom:-30%; width:40%; left:55%;">
            <div class="dl-right-top-btn">
              <ElButton type="primary" class={!state.pieStatus && 'noActive'}
                        onClick={() => changePieStatus(true)}>攻击类型分布比</ElButton>
              <ElButton type="primary" class={state.pieStatus && 'noActive'}
                        onClick={() => changePieStatus(false)}>异常日志事件比</ElButton>
            </div>
            <div
                class="chart-gjlxfbb"
                style="width: 100%;height: 100%"
            />
          </Card>
        </div>
      )
    }
  }
})
